<template>
	<d2-container>
	<template slot="header" class="query-area">
		<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="110px" style="height:auto">
			<el-row>
				<el-col :span="6">
					<el-form-item label="订单编号" prop="orderNo">
						<el-input type="text" v-model="queryForm.orderNo" placeholder="请输入订单编号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="会员账号" prop="userName">
						<el-input type="text" v-model="queryForm.userName" placeholder="请输入会员账号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="订单主状态" prop="orderStatus">
						<el-select v-model="queryForm.orderStatus" placeholder="请选择" style="width: 100%;">
							<el-option label="全部" value=""></el-option>
							<el-option label="初始" value="0"></el-option>
							<el-option label="待付款" value="1"></el-option>
							<el-option label="已付款" value="2"></el-option>
							<el-option label="已取消" value="3"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="售后状态" prop="afterSaleStatus">
						<el-select v-model="queryForm.afterSaleStatus" placeholder="请选择" style="width: 100%;">
							<el-option label="全部" value=""></el-option>
							<el-option label="无售后" value="0"></el-option>
							<el-option label="部分退款中" value="1"></el-option>
							<el-option label="全部退款中" value="2"></el-option>
							<el-option label="已部分退款" value="3"></el-option>
							<el-option label="已全部退款" value="4"></el-option>
							<el-option label="已撤销退款" value="5"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="支付方式" prop="payType">
						<el-select v-model="queryForm.payType" placeholder="请选择" style="width: 100%;">
							<el-option label="全部" value=""></el-option>
							<el-option label="账户支付" value="1"></el-option>
							<el-option label="现金支付" value="2"></el-option>
							<el-option label="通联支付" value="3"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="时间类型" prop="timeType">
						<el-select v-model="queryForm.timeType" placeholder="请选择" style="width: 100%;">
							<el-option label="全部" value=""></el-option>
							<el-option label="下单时间" value="1"></el-option>
							<el-option label="支付时间" value="2"></el-option>
							<el-option label="提货时间" value="3"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="时间范围" prop="time" label-width="100px">
						<el-date-picker
							v-model="time"
							type="datetimerange"
							:picker-options="pickerOptions"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="timestamp"
							align="right"
							:default-time="['00:00:00', '23:59:59']"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<div class="search-submit">
						<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
						<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						<!-- <el-button size="medium" @click="exportForm('queryForm')">导出</el-button> -->
					</div>
				</el-col>
			</el-row>
		</el-form>
	</template>
	<div>
		<el-table
			:data="tableData"
			style="width: 100%;margin-bottom: 20px;"
			row-key="id"
			border>
			<el-table-column type="index" label="序号" width="50"></el-table-column>
			<el-table-column prop="orderNo" label="订单编号" ></el-table-column>
			<el-table-column prop="createTime" label="下单时间" :formatter="forDate"></el-table-column>
			<el-table-column prop="userPhone" label="会员账号" ></el-table-column>
			<el-table-column prop="orderAmount" label="订单金额（元）" ></el-table-column>
			<el-table-column prop="couponAmount" label="消费券金额（元）"></el-table-column>
			<el-table-column align="center" prop="payType" label="支付方式" >
				<template slot-scope="scope">
					<el-tag v-if="scope.row.payType==1">账户支付</el-tag>
					<el-tag v-if="scope.row.payType==2">现金支付</el-tag>
					<el-tag v-if="scope.row.payType==3">通联支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="payTime" label="支付时间" :formatter="forDate"></el-table-column>
			<el-table-column align="center" prop="orderStatus" label="订单主状态">
				<template slot-scope="scope">
					{{scope.row.orderStatus==0?"初始":""}}
					{{scope.row.orderStatus==1?"待付款":""}}
					{{scope.row.orderStatus==2&&scope.row.afterSalesStatus!=4?"交易成功（已付款）":""}}
					{{scope.row.orderStatus==3?"交易关闭（取消订单）":""}}
					{{scope.row.orderStatus==2&&scope.row.afterSalesStatus==4?"交易关闭（售后退款）":""}}
				</template>
			</el-table-column>
			<el-table-column align="center" prop="afterSalesStatus" label="售后状态">
				<template slot-scope="scope">
					{{scope.row.afterSalesStatus==0?"无售后":""}}
					{{scope.row.afterSalesStatus==1?"部分退款中":""}}
					{{scope.row.afterSalesStatus==2?"全部退款中":""}}
					{{scope.row.afterSalesStatus==3?"部分退款成功":""}}
					{{scope.row.afterSalesStatus==4?"全部退款成功":""}}
					{{scope.row.afterSalesStatus==5?"已撤销退款":""}}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
					<div>
						<el-button type="success" size="small" @click="openOrderDetail(scope.row)">查看详情</el-button>
					</div>
					<div style="margin-top: 5px;">
						<el-button v-if="scope.row.orderStatus==2 && scope.row.isRefundHandling == 0 &&
					           (scope.row.afterSalesStatus == 0 || scope.row.afterSalesStatus == 3 || scope.row.afterSalesStatus == 5)"
					           type="info" size="small" @click="applyAfterSale(scope.row)">申请退货</el-button>
					</div>

				</template>
			</el-table-column>
		</el-table>
	</div>

	<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
	</d2-container>
</template>
<script>

import dayjs from 'dayjs'
export default {
  data () {
    return {
      time: [],
      queryForm: {
        orderNo: null
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.resetPage()
      this.time = []
      this.fetchData()
    },
    resetPage () {
      this.currentPage = 1
      this.pageSize = 10
      this.total = 0
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData () {
      this.loading = true
    },
    forDate (row, column) {
      var formatTime = ''
      if (column.property == 'createTime') {
        formatTime = row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
      return formatTime
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped

</style>
